<template>
  <div>
    <headertitle></headertitle>
	<search></search>
    <div class="body" id="body4">
      <div class="BoxMyCar">
        <div class="ShopCar">
          <div class="CarHead">
            <i class="icon iconfont icon-gouwuche1"></i>
            购物车
          </div>
          <div class="BoxShop">
            <div class="Shoplist">
              <div>
                <div class="check">
                  <input type="checkbox" />
                  <i class="icon iconfont icon-check-box-uncheck"></i>
                </div>
                <div class="ShopName">海澜之家旗舰店</div>
                <div class="guige">规格</div>
                <div class="danjia">单价</div>
                <div class="num">数量</div>
                <div class="money">金额</div>
                <div class="u">操作</div>
              </div>
              <ul>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
                <li>
                  <div class="check">
                    <input type="checkbox" />
                    <i class="icon iconfont icon-check-box-uncheck"></i>
                  </div>
                  <div class="ShopName">
                    <img src="../../public/images/bigorange.jpg" />
                    <div>《寻龙诀》北京保利龙旗广场</div>
                  </div>
                  <div class="guige">
                    <div>
                      版本:
                      <span>国航32G</span>
                    </div>
                    <div>
                      颜色:
                      <span>星钻黑</span>
                    </div>
                  </div>
                  <div class="danjia">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="num">
                    <div>
                      <button class="btnJia">+</button>
                      <input type="text" value="1" />
                      <button class="btnJian">-</button>
                    </div>
                  </div>
                  <div class="money">
                    ￥
                    <span>35.0</span>
                  </div>
                  <div class="u">
                    <a href="###">删除</a>
                  </div>
                </li>
              </ul>
              <div class="gross">
                <div>
                  <h5>商品金额</h5>￥
                  <span></span>
                </div>
              </div>
            </div>
            <div class="Gross">
              <div class="GrossLeft">
                <span>全选</span>
                <span>批量删除</span>
              </div>
              <div class="GrossRight">
                <div>
                  商品总计：
                  <span></span>
                </div>
                <button class="Settle"><router-link to="/qrwdz">去结算</router-link></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footertitle></footertitle>
  </div>
</template>

<script>
import search from "../components/search.vue";
import headertitle from "../components/headertitle.vue";
import footertitle from "../components/footertitle.vue";
export default {
  components: { headertitle, footertitle ,search}
};
</script>
<style>
*{
    margin:0;
    padding:0;
}
ul,li{
    list-style: none;
}
html,body{
    width: 100%;
    min-width: 1000px;
}
#body4 .BoxMyCar{
  width:70%;
  margin-left: 15%;
}
#body4 input,button{
    outline: none;
}
#body4 button{
    cursor: pointer;
}
#body4 .ShopCar{
    width: 100%;
    border-top:1px solid #d3d3d3;
    margin-top:30px;
}
#body4 .CarHead{
    width:100%;
    height:60px;
    font-size: 20px;
    color:#666;
    margin-top:20px;
    line-height: 60px;
    border-bottom:1px solid #e9e9e9;
}
#body4 .CarHead i{
    font-size: 25px;
    color:#ff8800;
}
/* .BoxShop{
    display: none;
} */
#body4 .Shoplist{
    width:100%;
    border:1px solid #d3d3d3;
    font-size: 14px;
    margin-top:20px;
}
#body4 .Shoplist>div{
    width:100%;
    height:30px;
    background: #f2f2f2;
    line-height: 30px;
}
#body4 .Shoplist>div>div{
    float: left;
    height:100%;
}
#body4 .Shoplist ul{
    width:100%;
}
#body4 .Shoplist ul li{
    width:100%;
    height:60px;
    line-height: 60px;
    padding: 10px 0;
    font-size: 12px;
    color:#999999;
    border-bottom: 1px solid #d3d3d3;
}
#body4 .Shoplist ul li>div{
    float: left;
    height:100%;
}
#body4 .Shoplist .check{
    width:5%;
    text-align: center;
}
#body4 .Shoplist .check i{
    cursor: pointer;
}
#body4 .Shoplist .check input{
    display: none;
}
#body4 .Shoplist .ShopName{
    width:30%;
    margin-right: 5%;
}
#body4 .Shoplist .ShopName img{
    height:58px;
    border:1px solid #d3d3d3;
    float: left;
}
#body4 .Shoplist .ShopName div{
    float: left;
    width:61%;
    text-align: center;
}
#body4 .Shoplist .guige{
    width:16%;
    text-align: center;
}
#body4 .Shoplist .guige>div{
    width:100%;
    height:30px;
    line-height: 30px;
}
#body4 .Shoplist .danjia{
    width:7%;
    text-align: center;
}
#body4 .Shoplist .num{
    width:14%;
    text-align: center;
}
#body4 .Shoplist .num div{
    width:70%;
    height:30px;
    border:1px solid #d3d3d3;
    margin:15px auto;
}
#body4 .Shoplist .num div button{
    width:31%;
    height:100%;
    border:none;
    float: left;
    font-size: 25px;
    color:#999999;
    outline: none;
    line-height: 28px;
    cursor: pointer;
}
#body4 .Shoplist .num div input{
    width:35%;
    height:100%;
    border:none;
    outline: none;
    text-align: center;
    float: left;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
}
#body4 .Shoplist .money{
    width:5%;
    height:100%;
    text-align: center;
}
#body4 .Shoplist .u{
    width:16%;
    text-align: center;
}
#body4 .Shoplist .gross{
    width: 100%;
    height:86px;
    background: #fff;
}
#body4 .Shoplist .gross div{
    width: 34%;
    float: right;
    text-align: center;
    line-height: 43px;
    font-size: 25px;
    color:#ff6c00;
}
#body4 .Shoplist .gross div h5{
    font-size: 20px;
    color:#333333;
}
#body4 .Gross{
    width:100%;
    height:120px;
    font-size: 14px;
    line-height: 120px;
}
#body4 .Gross .GrossLeft{
    float: left;
    width:28%;
    height:100%;
    color:#2684c7;
}
#body4 .Gross .GrossLeft span{
    cursor: pointer;
}
#body4 .Gross .GrossLeft span:last-child{
    margin-left: 28%;
}
#body4 .Gross .GrossRight{
    width:43%;
    height:120px;
    float: right;
}
#body4 .Gross .GrossRight div{
    width:50%;
    height:100%;
    float: left;
    line-height: 120px;
    text-align: center;
}
#body4 .Gross .GrossRight div span{
    font-size: 28px;
    color:#ff6c00;
}
#body4 .Gross .GrossRight button{
    width:40%;
    height:40px;
    border:none;
    background: #ff6c00;
    color:#fff;
    border-radius: 3px;
    float: right;
    margin:40px 0;
}
#body4 .CarNull{
    width:100%;
    height:480px;
    overflow: hidden;
}
#body4 .CarNull>div{
    width:100%;
    height:160px;
    margin:160px 0;
}
#body4 .CarNull>div>div{
    width:40%;
    margin:auto;
}
#body4 .CarNull>div>div>div{
    float: left;
    width:50%;
    height:160px;
}
#body4 .NullLeft{
    text-align: center;
}
#body4 .NullLeft i{
    font-size: 130px;
    color:#d6d6d6;
}
#body4 .NullRight div{
    width:100%;
    height:80px;
    color:#666666;
}
#body4 .NullRight button{
    width:100%;
    height:40px;
    border:none;
    background: #ff6c00;
    border-radius: 5px;
    color:#fff;
}
</style>
